<template>
  <div>
    <div style="position: absolute;background-color: #1989fa;width: 100%;height: 180px;">
      <div @click="settings" style="float:right;width: 30px;height: 30px;margin: 20px;">
        <!--      <van-icon name="smile-o" color="#ffffff" size="30px"/>-->
        <img src="
http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/%E8%AE%BE%E7%BD%AE%28%E7%99%BD%29.png?e=1737190673&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:eVb2JlCQNtcti9JfGovkmInSmxw="
             width="30px">
      </div>
    </div>

    <div align="center" style="margin-top: 80px;">
      <van-image
          round
          width="100px"
          height="100px"
          :src="imageUrl"
      />
      <div style="font-size: 20px;font-weight: 700">{{ nickname }}</div>
    </div>

    <div>
      <div style="background-color: #f5f7ff;width: 100%;height: 120px;margin-top: 30px">
        <p style="width: 100%;font-size: 14px;font-weight: 700;">
          <span style="float:left;margin: 10px 20px;">资料完成</span>
          <span style="float:right;margin: 10px 20px;">{{ certificationsNum }}%</span>
        </p>
        <br>
        <van-progress :percentage="certificationsNum" style="margin: 30px auto ;width: 80%;"/>
        <van-button type="info" style="width: 32%;height: 30px;border-radius: 10px" @click="Authentication">
          完善认证资料
        </van-button>
      </div>
    </div>

    <div style="width: 100%;" v-if="this.orderFlag">
      <div style="width: 100%;height: 30px;">
        <p style="color: #2b2d41;font-size: 15px;font-weight: 700;float:left;margin-left: 10px;">租凭记录</p>
      </div>
      <br>
      <div style="width: 90%;margin: auto;background-color: #f5f7ff;border-radius: 10px">
        <p style="width: 100%;height: 50px;font-size: 14px;font-weight: 700;">
          <span style="float:left;margin: 20px;font-size: 16px">{{ order.carName }}</span>
          <span style="float:right;margin: 20px;font-size: 12px;color: darkgray">{{ order.paymentTime|format("yyyy-MM-dd hh:mm:ss") }}</span>
        </p>
        <div style="width: 100%;margin: auto;">
          <img :src="order.imageUrl" style="width: 80%;margin: auto;"/>
        </div>
        <br>
        <div style="width: 100%;height: 50px;">
          <p style="font-size: 16px;font-weight: 700;float:left;margin-left: 20px">￥<span>{{
              order.totalPrice
            }}</span><span
              style="color: darkgray"> / 2天</span></p>
          <van-button type="info" style="height: 30px;border-radius: 10px;float:right;margin: 10px 20px;"
                      @click="detail">
            租凭详情
          </van-button>
        </div>

      </div>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item @click="inage(active)">
        <span>首页</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icon.active : icon.inactive"
        />
      </van-tabbar-item>

      <van-tabbar-item @click="inage(active)" icon="search">
        <span>附近</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icons.active : icons.inactive"
        />

      </van-tabbar-item>


      <van-tabbar-item @click="inage(active)" icon="gem">
        <span>我的预定</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? icong.active : icong.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item @click="inage(active)" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "MyView",
  data() {
    return {
      userId: '',
      imageUrl: "",
      nickname: "用户666666",
      phoneNumber: "",
      certificationsNum: 0,
      // order: {
      //   id:'',
      //   name: "宾利慕尚",
      //   time: "2025-1-15",
      //   img: "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_003.PNG?e=1736942339&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:wHlgj2fkBTiuPbTJKBmT_EShMok=",
      //   price: "2000",
      // },
      order: {
        imageUrl: '',
        carName: '',
        userName: '',
        paymentTime: '',
        rentalStartDate: '',
        rentalEndDate: '',
        pickupLocation: '',
        totalPrice: '',
      },
      orderFlag: true,
      active: 0,
      icon: {
        active: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain',
        inactive: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain'
      },
      icons: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
      icong: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
      },
      iconb: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
    };
  },
  created() {
    var user = localStorage.getItem("currentUser")
    if (user != null) {
      this.userId = JSON.parse(user).userId
      this.nickname = JSON.parse(user).nickname
      this.phoneNumber = JSON.parse(user).phoneNumber
      this.imageUrl = JSON.parse(user).imageUrl
    } else {
      this.$message.error("请先登录")
      this.$router.push("/login")
      return;
    }
    if (this.userId != null) {
      this.getById()
      this.getRentalDetailsByUserId()
    }
  },
  methods: {
    getRentalDetailsByUserId() {
      this.axios.get(`http://localhost:10086/api/user/users/rentalDetails/` + this.userId).then(res => {
        if (res.data.code == 200) {
          this.order = res.data.data
        } else {
          this.orderFlag = false
        }
      })
    },
    getById() {
      this.axios.get("http://localhost:10086/api/user/users/getById/" + this.userId).then(res => {
        if (res.data.code == 200) {
          console.log(res)
          console.log(res.data.data)
          var user = res.data.data
          var num = 0;
          for (let key in user) {
            if (user[key] != null) {
              num++
            }
          }
          if (num >= 6) {
            this.certificationsNum = 100;
          } else if (num == 5) {
            this.certificationsNum = 80;
          } else {
            this.certificationsNum = num * 20;
          }
          console.log(this.certificationsNum)
        } else {
          console.log(res.data.message)
        }
      })
    },
    settings() {
      this.$router.push("/settings")
    },
    Authentication() {
      this.$router.push("/certifications")
    },
    detail() {
      this.$router.push("/rentalDetails")
    },
    inage(active) {
      switch (active) {
        case 0:
          this.$router.push({name: 'index'});
          break;
        case 1:
          this.$router.push({name: 'rearby'});
          break;
        case 2:
          this.$router.push({name: 'reserve'});
          break;
        default:
          break;
      }
    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>

<style scoped>

</style>